<template>
	<view class="page" style="background-color: #FFFFFF;">
		<view class="f-1 f-column p-lr-30" v-if="data" style="border-top: 2rpx solid #e8e8e8;">
			<view class="item">
				<view class="title">提货点名称</view>
				<view class="item-data">
					<input type="text" :value="data.mer_take_name" @input="inputChange($event,'mer_take_name')">
				</view>
			</view>
			<view class="item">
				<view class="title">提货点手机号</view>
				<view class="item-data">
					<input type="digit" maxlength="11" :value="data.mer_take_phone" @input="inputChange($event,'mer_take_phone')">
				</view>
			</view>
			<view class="item">
				<view class="title">详细地址</view>
				<view class="item-data">
					<input type="text" :value="data.mer_take_address" @input="inputChange($event,'mer_take_address')">
				</view>
			</view>
			<view class="item">
				<view class="title">提货点营业日期</view>
				<view class="item-data" style="align-items: center;" @click="changeSelecting">
					<view class="f-row" style="overflow-x: scroll;white-space: nowrap;padding-right: 45rpx;
		overflow-y: unset;width: 300rpx;">
						<view class="business-day-item" v-for="(item , index) in data.mer_take_day" :key="index" @click.stop>
							{{item}}
							<image src="../../static/icons/delete.png" mode="aspectFill" @click="deleteDay(index)"></image>
						</view>
						<view style="height: 100%;width: 45rpx;background-color: #007AFF;"></view>
					</view>
					<view :class="selecting ? 'sanjiao' : 'sanjiaoOri'"></view>
				</view>
			</view>
			<view class="item">
				<view class="title">提货点营业时间</view>
				<view class="item-data" style="align-items: center;">
					<view class="picker-container">
						<picker mode="time" :value="time" @change="bindTimeChange($event,true)">
							<view>{{time}}</view>
						</picker>
					</view>
					<view class="f-1" style="text-align: center;">至</view>
					<view class="picker-container">
						<picker mode="time" :value="sectime" @change="bindTimeChange($event,false)">
							<view>{{sectime}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">经纬度</view>
				<view class="item-data" style="padding-right: 0;">
					<view class="f-row f-1" style="height: 60rpx;line-height: 60rpx;">
						<view class="position-item" style="height: 60rpx;line-height: 60rpx;" v-for="(item, index) in data.mer_take_location"
						 :key="index">
							{{item + ((data.mer_take_location.indexOf(item) == (data.mer_take_location.length - 1)) ? '' : ',')}}
						</view>
					</view>
					<view class="position-set click-opacity" @click="setPosition">
						定位
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">门店自提</view>
				<view class="switch-container">
					<switch :checked="data.mer_take_status == 1 ? true : false" @change="switchChange"/>
				</view>
			</view>
			<view class="submit-button" @click="submitClick">
				提交
			</view>
			<!-- 营业日期选择 -->
			<view class="selectarea-container" :style="selecting ? 'bottom:0' : 'bottom: -100vh' " @touchmove.stop.prevent>
				<view class="f-1" style="width: 100%;background-color: rgba(0, 0, 0, .7);" @click.stop="cancelSelecting"></view>
				<view class="selectarea">
					<scroll-view scroll-y="true" scroll-x="false" class="category-item">
						<view class='category-child-item' v-for="(item, index) in busdayList" :key="index" @click.stop="selectDay(item)">
							{{item}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import SETTING from '../../api/setting.js'
	import { showToast } from '../../lib/utils.js'
	export default {
		data() {
			return {
				data: false,
				selecting: false,
				busdayList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				time: '00:00',
				sectime: '00:00'
			}
		},
		onLoad() {
			_this = this;
			_this.requestData();
		},
		methods: {
			requestData() {
				SETTING.takeSelfInfo().then((res) => {
					console.log(res);
					_this.data = res;
				}).catch((err) => {
					console.log(err);
				})
			},
			changeSelecting() {
				_this.selecting = true;
			},
			cancelSelecting() {
				_this.selecting = false;
			},
			selectDay(item) {
				if (_this.data.mer_take_day.indexOf(item) !== -1) {
					_this.selecting = false;
					return;
				}
				_this.data.mer_take_day.push(item);
				_this.selecting = false;
			},
			deleteDay(index) {
				let arr = JSON.parse(JSON.stringify(_this.data.mer_take_day));
				arr.splice(index, 1);
				_this.data.mer_take_day = arr;
			},
			bindTimeChange: function(e, flag) {
				if (flag) {
					_this.time = e.target.value;
					_this.data.mer_take_time[0] = _this.time;
				} else {
					_this.sectime = e.target.value;
					_this.data.mer_take_time[2] = _this.sectime;
				}
			},
			setPosition() {
				uni.navigateTo({
					url: '../position/position'
				});
			},
			switchChange(e) {
				console.log(e);
				_this.data.mer_take_status = e.target.value ? 1 : 0 ;
			},
			inputChange(e, str) {
				_this.data[str] = e.target.value;
			},
			submitClick() {
				if(_this.data.mer_take_name.trim() == '' || _this.data.mer_take_name == '') {
					showToast('提货点名称不能为空');
					return;
				}
				if(_this.data.mer_take_phone.length !== 11 || !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_this.data.mer_take_phone))) {
					showToast('非法手机号码');
					return;
				}
				if(_this.data.mer_take_address.trim() == '' || _this.data.mer_take_address == '') {
					showToast('地址不能为空');
					return;
				}
				if(_this.data.mer_take_day.length == 0) {
					showToast('请添加营业日');
					return;
				}
				if(_this.data.mer_take_day.length == 0) {
					showToast('请添加营业日');
					return;
				}
				if(_this.data.mer_take_location.length !== 2) {
					showToast('位置错误，请重定位');
					return;
				}
				SETTING.takeSelfUpdate(_this.data).then((res) => {
					console.log(res);
					showToast(res.data.message);
					setTimeout(() => {
						uni.navigateBack();
					},250);
				}).catch((err) => {
					console.log(err);
					showToast(err.data.message);
				});
			}
		}
	}
</script>

<style>
	.item {
		display: flex;
		flex-direction: row;
		position: relative;
		height: 100rpx;
		overflow: hidden;
		align-items: center;
		margin-top: 20rpx;
	}

	.title {
		height: 100rpx;
		line-height: 100rpx;
		margin-right: 30rpx;
		font-size: 26rpx;
		width: 200rpx;
		text-align: right;
	}

	.title::after {
		content: "：";
		font-size: 26rpx;
	}

	.item-data {
		display: flex;
		height: 60rpx;
		border: 2rpx solid #e8e8e8;
		padding: 0 15rpx;
		border-radius: 16rpx;
		flex: 1;
	}

	.item-data input {
		display: inline-block;
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.business-day-item {
		padding-left: 10rpx;
		padding-right: 45rpx;
		background-color: #FFFFFF;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 22rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
		border: 2rpx solid #e8e8e8;
		position: relative;
	}

	.business-day-item image {
		position: absolute;
		height: 30rpx;
		width: 30rpx;
		top: 10rpx;
		right: 10rpx;
	}

	.sanjiao,
	.sanjiaoOri {
		top: 50%;
		right: 20rpx;
		margin-top: -5rpx;
	}

	.category-child-item::after {
		display: none;
	}

	.picker-container {
		height: 60rpx;
		line-height: 60rpx;
		border-top: 2rpx solid #e8e8e8;
		border-bottom: 2rpx solid #e8e8e8;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	.position-set {
		width: 100rpx;
		height: 60rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		border-top-right-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}
	
	.submit-button{
		margin-top: 30rpx;
		position: relative;
		width: 100%;
		height: 70rpx;
		color: #FFFFFF;
		background-color: #53A7FF;
		line-height: 70rpx;
		font-size: 26rpx;
		font-weight: bold;
		text-align: center;
		border-radius: 10rpx;
	}
</style>
